<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <%--<link href="${basePath}/resources/zheng-admin/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>--%>
    <%--<link href="${basePath}/resources/zheng-admin/plugins/material-design-iconic-font-2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>--%>
    <jsp:include page="/resources/inc/head.jsp" flush="true"/>
    <style type="text/css">
         .tag-container {
             border-radius: 10px;
             box-shadow: 1px 1px 1px rgba(0,0,0,.05);
         }
        .tag-chart {
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
            background:#DCDCDC;
        }
    </style>

</head>
<body>
<div id="main">
    <div class="container" style="padding: 20px;">
        <row>
            <form id="queryParamForm" style="height:30px;">
            <div class="col-sm-1" style="line-height:30px;">代理：</div>
            <div class="col-sm-2">
                <div id="agent" data-id="${agent.id}" data-name="${agent.name}" ></div>
            </div>
            <div class="col-sm-1" style="line-height:30px;">起始时间：</div>
            <div class="col-sm-2">
                <input type="text" id="startTime" name="startTime" class="form-control" data-date-format="yyyy-mm-dd" placeholder="开始时间" value="" pattern="yyyy-MM-dd" />
                <%--<input type="text" hidden name="startTime" value="">--%>
            </div>
            <div class="col-sm-1" style="line-height:30px;">结束时间：</div>
            <div class="col-sm-2">
                <input type="text" id="endTime" name="endTime" class="form-control" data-date-format="yyyy-mm-dd" placeholder="开始时间" value="" pattern="yyyy-MM-dd" />
                <%--<input type="text" hidden name="endTime" value="">--%>
            </div>
            <div class="col-sm-1"><button type="button" class="btn btn-primary" id="refresh_btn">查询</button></div>
            </form>
        </row>
        <br/>
        <div class="row">
            <%--<div id="pie" style="width: 100%;height:250px;" ></div>--%>
            <%--<div class="col-sm-6 col-md-4">--%>
                <%--<div class="row tag-container" style="background: red;">--%>
                    <%--<div class="col-sm-10 col-md-4 tag-chart">--%>
                        <%--<div id="pie" style="width: 100%;height:90px;" ></div>--%>
                    <%--</div>--%>
                    <%--<div class="col-sm-10 col-md-4">--%>
                        <%--<p3>利润总值</p3>--%>
                        <%--<p>123456</p>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--&lt;%&ndash;<div class="panel panel-default">&ndash;%&gt;--%>
                    <%--&lt;%&ndash;<div class="panel-heading"><span class="glyphicon glyphicon-yen" aria-hidden="true"></span>Panel heading without title </div>&ndash;%&gt;--%>
                    <%--&lt;%&ndash;<div class="panel-body">&ndash;%&gt;--%>
                        <%--&lt;%&ndash;&lt;%&ndash;Panel content&ndash;%&gt;&ndash;%&gt;--%>
                        <%--&lt;%&ndash;<div id="pie" class="container" style="width:100%;height:80px;"></div>&ndash;%&gt;--%>
                        <%--&lt;%&ndash;&lt;%&ndash;<span class="glyphicon glyphicon-yen"></span>&ndash;%&gt;&ndash;%&gt;--%>
                        <%--&lt;%&ndash;&lt;%&ndash;<i class="glyphicon glyphicon-yen"></i>&ndash;%&gt;&ndash;%&gt;--%>
                    <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
                <%--&lt;%&ndash;</div>&ndash;%&gt;--%>
            <%--</div>--%>
                <shiro:hasPermission name="business:home:sales">
                    <div class="col-sm-12 col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">销售趋势图</div>
                            <div class="panel-body" >
                                <div id="sales_area" style="width: 100%;height:300px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <shiro:hasPermission name="business:home:profit">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">利润总额</div>
                            <div class="panel-body">
                                <div id="profit_pie" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <shiro:hasPermission name="business:home:order">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">累计订单</div>
                            <div class="panel-body">
                                <div id="order_pie" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <shiro:hasPermission name="business:home:fans">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">粉丝总数</div>
                            <div class="panel-body">
                                <div id="fans_pie" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <%--<div class="col-sm-6 col-md-4">--%>
                <%--<div class="panel panel-default">--%>
                <%--<div class="panel-heading">在借伞数</div>--%>
                <%--<div class="panel-body">--%>
                <%--<div id="loan_pie" style="width: 100%;height:180px;"></div>--%>
                <%--</div>--%>
                <%--</div>--%>
                <%--</div>--%>
                <shiro:hasPermission name="business:home:deposit">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">预付金总额</div>
                            <div class="panel-body">
                                <div id="deposit_pie" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <shiro:hasPermission name="business:home:balance">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">充值余额</div>
                            <div class="panel-body">
                                <div id="balance_pie" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <shiro:hasPermission name="business:home:timecard">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">时长卡总额</div>
                            <div class="panel-body">
                                <div id="timecard_pie" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <shiro:hasPermission name="business:home:umbrella">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">雨伞情况统计</div>
                            <div class="panel-body">
                                <div id="umbrella_statistics" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
                <shiro:hasPermission name="business:home:machine">
                    <div class="col-sm-6 col-md-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">设备情况统计</div>
                            <div class="panel-body">
                                <div id="machine_statistics" style="width: 100%;height:180px;"></div>
                            </div>
                        </div>
                    </div>
                </shiro:hasPermission>
        </div>
    </div>
</div>
<%--<script src="${basePath}/resources/zheng-admin/plugins/jquery-3.1.1.min.js"></script>--%>
<%--<script src="${basePath}/resources/zheng-admin/plugins/jquery-validation-1.17.0/dist/jquery.validate.min.js"></script>--%>
<%--<script src="${basePath}/resources/zheng-admin/plugins/bootstrap-3.3.0/js/bootstrap.min.js"></script>--%>
<jsp:include page="/resources/inc/footer.jsp" flush="true"/>
<script src="${basePath}/resources/zheng-admin/plugins/echarts-2.2.7/build/dist/echarts.js"></script>
<script src="${basePath}/resources/js/home.js"></script>
<script type="text/javascript">

    function getPreMonth(date) {
        var arr = date.split('-');
        var year = arr[0]; //获取当前日期的年份
        var month = arr[1]; //获取当前日期的月份
        var day = arr[2]; //获取当前日期的日
        var days = new Date(year, month, 0);
        days = days.getDate(); //获取当前日期中月的天数
        var year2 = year;
        var month2 = parseInt(month) - 1;
        if (month2 == 0) {
            year2 = parseInt(year2) - 1;
            month2 = 12;
        }
        var day2 = day;
        var days2 = new Date(year2, month2, 0);
        days2 = days2.getDate();
        if (day2 > days2) {
            day2 = days2;
        }
        if (month2 < 10) {
            month2 = '0' + month2;
        }
        var t2 = year2 + '-' + month2 + '-' + day2;
        return t2;
    }

    $(function(){
        $('#startTime,#endTime').datepicker();
        //初始化树形select控件
        <%--$("#agent").bootstrapCombotree({--%>
            <%--data: ${upmsAgents},//data应符合实例的data格式--%>
            <%--defaultLable:"请选择",--%>
            <%--name : 'agentId'//combotree值域的name，可以用在表单提交--%>
        <%--});--%>
        $("#agent").ztreeSelect({
            name:"agentId",
            url: '${basePath}/manage/agentTree',
            params: {isLeaf: 1},
            renderId: "agent",
            callback: function (nodeIds, treeNode) {
            }
        })

        $('#refresh_btn').click(function(){
            if($('#startTime').val()=='' || $('#endTime').val()==''){
                $.confirm({
                    theme: 'dark',
                    animation: 'rotateX',
                    closeAnimation: 'rotateX',
                    title: false,
                    content: '时间不能为空，开始时间、结束时间必选选择',
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button waves-light'
                        }
                    }
                });
                return;
            }
            initChart('${basePath}',$('#queryParamForm').serialize());
        });

        var agentId = ${agent.id};
        var startTime = new Date();
        startTime.setDate(startTime.getDate()+1);
        var endTime = startTime;

        $('#startTime').val(getPreMonth(getSmpFormatDate(startTime,false)));
        $('#endTime').val(getSmpFormatDate(endTime,false));

        var params = {
            agentId:agentId,
            startTime:$('#startTime').val(),
            endTime:$('#endTime').val()
        };



        initChart('${basePath}',params);
    });
</script>
</body>
</html>